---
import { IconButton, Button } from "#components/primitives";
import { siGithub, siX } from "simple-icons";
import { linkedinIcon } from "#icons/linkedin";
import { mdiAt } from "@mdi/js";
---

<div
  class="max-w-screen-xl p-4 m-0 md:p-8 w-full flex flex-col justify-center items-center md:items-start rounded-b-none border-b-0 gap-2 text-gray-600 dark:text-gray-300"
>
  <div
    class="flex-col md:flex-row flex w-full flex-1 justify-center items-start md:items-center gap-1 md:gap-2"
  >
    <div class="flex w-full flex-col md:flex-row">
      <div class="flex justify-center md:justify-start items-start md:items-center gap-1 md:gap-2">
        <IconButton
          path={mdiAt}
          variant="text"
          class="m-0"
          text="soft"
          link="mailto:hello@vrite.io"
        />
        <IconButton
          path={siX.path}
          iconProps={{ class: "h-5 w-5" }}
          variant="text"
          class="m-0 h-8 w-8"
          text="soft"
          link="https://twitter.com/vriteio"
          target="_blank"
        />
        <IconButton
          path={linkedinIcon}
          variant="text"
          class="m-0"
          text="soft"
          link="https://www.linkedin.com/company/vrite/"
          target="_blank"
        />
        <IconButton
          path={siGithub.path}
          variant="text"
          text="soft"
          class="m-0"
          link="https://github.com/vriteio/vrite"
          target="_blank"
        />
      </div>
    </div>
  </div>
  <div
    class="flex flex-col md:flex-row w-full mt-4 justify-center items-center text-gray-500 dark:text-gray-400"
  >
    <span>© {new Date().getFullYear()} Vrite, Inc. All rights reserved.</span>
    <div class="flex-1"></div>{" "}
    <Button
      class="m-0 whitespace-nowrap"
      variant="text"
      text="soft"
      link="/privacy"
      target="_blank"
    >
      Privacy policy
    </Button>
    <Button class="m-0 whitespace-nowrap" variant="text" text="soft" link="/tos" target="_blank">
      Terms of service
    </Button>
  </div>
</div>
